<template>
  <div id="building">
    <el-container>
      <el-aside width="600px"
        ><div style="float: left">
          <h1 style="font-family: 'Courier New', Courier, monospace;color: white; font-size: 80px">赫龍</h1>
          <h1
            style="
            font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
              color: white;
              font-size: 150px;
              margin-top: 100px;
              margin-left: 260px;
            "
          >
            E R P
          </h1>
          <h1 style="font-family:'Courier New', Courier, monospace;color: white; font-size: 30px;margin-top: -50px;; margin-left: 270px">
            开源·一体化·数字化
          </h1>
        </div></el-aside
      >
      <el-main width="600px"
        ><div
          style="float: right; margin-right: 100px; margin-top: 240px"
          class="center"
        >
          <h1>登录/注册</h1>
          <div class="logon" style="text-align: center">
            <div :class="overlaylong">
              <div class="overlaylong-Signin" v-if="disfiex == 0">
                <h2 class="overlaylongH2">登录</h2>
                <el-input
                  type="text"
                  style="width: 260px; height: 40px; margin-top: 10px"
                  placeholder="用户名"
                  v-model="form.userName"
                />
                <el-input
                  type="text"
                  style="width: 260px; height: 40px; margin-top: 10px"
                  placeholder="密码"
                  show-password
                  v-model="form.userPwd"
                />
                <el-button
                  size="large"
                  type="primary"
                  style="margin-top: 10px; width: 160px; height: 40px"
                  round
                  @click="loginAll"
                  >登录</el-button
                >
              </div>

              <div class="overlaylong-Signup" v-if="disfiex == 1">
                <h2 class="overlaylongH2">注册账户</h2>
                <el-input
                  type="text"
                  style="width: 260px; height: 40px; margin-top: 10px"
                  placeholder="用户名"
                  v-model="AddUserform.userName"
                />
                <el-input
                  type="text"
                  style="width: 260px; height: 40px; margin-top: 10px"
                  placeholder="密码"
                  show-password
                  v-model="AddUserform.userPwd"
                />
                <el-input
                  type="text"
                  style="width: 260px; height: 40px; margin-top: 10px"
                  placeholder="确认密码"
                  show-password
                  v-model="forma.userPwda"
                />
                <el-select
                  style="width: 260px; height: 40px; margin-top: 10px"
                  v-model="AddUserform.roleId"
                >
                  <el-option label="请选择" :value="0" />
                  <el-option label="普通用户" :value="5" />
                </el-select>
                <div>
                  <el-button
                    type="primary"
                    style="margin-top: 10px; width: 120px; height: 40px"
                    round
                    @click="AddUser"
                    >注册</el-button
                  >
                  <el-button
                    type="primary"
                    style="margin-top: 10px; width: 120px; height: 40px"
                    round
                    @click="ent"
                    >取消</el-button
                  >
                </div>
              </div>
            </div>
            <div :class="overlaytitle">
              <div class="overlaytitle-Signin" v-if="disfiex == 0">
                <h2 class="overlaytitleH2">亲爱的魁拔！</h2>
                <p class="overlaytitleP">
                  输入您的个人信息，与我们一起开始旅程
                </p>
                <div class="buttongohs" @click="Signin">注册</div>
              </div>
              <div class="overlaytitle-Signup" v-if="disfiex == 1">
                <h2 class="overlaytitleH2">欢迎回来!</h2>
                <p class="overlaytitleP">
                  要与我们保持联系，请使用您的个人信息登录
                </p>
                <div class="buttongohs" @click="Signup">登录</div>
              </div>
            </div>
          </div>
          <span style="color: white">
            Red Dragon© 2024 北京Dsz科技有限公司版权所有</span
          >
        </div></el-main
      >
    </el-container>
  </div>
</template>

<script setup lang="ts">
import "../assets/font/font.css";
import { Delete, Edit, Search, Share, Upload } from "@element-plus/icons-vue";
import { reactive, ref, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter();
import { ElMessage } from "element-plus";
const apiurls = import.meta.env.VITE_APP_API_URL_RBACShow;
const apiurla = import.meta.env.VITE_APP_API_URL_RBACAdd;




const forma = reactive({
  userPwda: "",
});
//权限添加的form
const AddUserform = reactive({
  userId: 0,
  userName: "",
  userPwd: "",
  userState: true,
  isDelete: false,
  userRoleId: 0,
  roleId: 0,
  handle: "无",
  handleContext: "添加用户信息",
  handleTime: new Date(),
  pid: 0,
});
//取消
const ent = () => {
  AddUserform.userName = "";
  AddUserform.userPwd = "";
};
//添加用户
const AddUser = () => {
  if (AddUserform.userPwd != forma.userPwda) {
    ElMessage.error("两次密码不一致");
    return;
  }
  if (AddUserform.userPwd == "") {
    ElMessage.error("请输入密码");
    return;
  }
  if (AddUserform.userName == "") {
    ElMessage.error("请输入用户名称");
    return;
  }
  axios
    .post(apiurla + "/api/RBAC/AddUsersData", AddUserform)
    .then((res: any) => {
      console.log(res.data);
      ElMessage.success(res.data.msg);
    });
};
//绑定角色下拉
const ShowRoleData: any = ref([]);
const ShowRole = () => {
  const data = {};
  axios.post(apiurls + "/api/RBACs/ShowRoleData", data).then((res: any) => {
    ShowRoleData.value = res.data.data;
  });
};
//页面初始化
onMounted(() => {
  ShowRole();
});

//定义变量
const form = reactive({
  userName: "",
  userPwd: "",
});

const overlaylong = ref("overlaylong");
const overlaytitle = ref("overlaytitle");
const disfiex = ref(0);

//登录
const loginAll = () => {
  if (form.userPwd == "") {
    ElMessage.error("请输入密码");
    return;
  }
  if (form.userName == "") {
    ElMessage.error("请输入用户名称");
    return;
  }
  axios.post(apiurls + "/api/RBACs/ShowUserData", form).then((res: any) => {
    if (res.data.code == 1) {
      console.log(apiurls + "/api/RBACs/ShowUserData", res.data);
      ElMessage.success(res.data.msg);
      //存入数据
      localStorage.setItem("userInfo", JSON.stringify(res.data.data));
      // //读出数据
      // const value = localStorage.getItem("userInfo");
      // //反序列化JSON字符串
      // const list = JSON.parse(value);
      // console.log(list);
      // //删除数据
      // localStorage.removeItem("key");
      // //清空所有数据
      // localStorage.clear();
      ////打印序列化后的JSON字符串
      //console.log(JSON.stringify(res.data.data));
      router.push({ name: "MainView" });
    } else {
      localStorage.setItem("userInfo", "");
      ElMessage.error(res.data.msg);
    }
  });
};

const Signin = () => {
  overlaylong.value = "overlaylongleft";
  overlaytitle.value = "overlaytitleright";
  setTimeout(() => {
    disfiex.value = 1;
  }, 200);
};

const Signup = () => {
  overlaylong.value = "overlaylongright";
  overlaytitle.value = "overlaytitleleft";
  setTimeout(() => {
    disfiex.value = 0;
  }, 200);
};


</script>

<style>
#building {
  background: url("../views/Img/【哲风壁纸】万里长城-长城.png");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
</style>



<style scoped>
.center {
  width: 800px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

h1 {
  font-size: 30px;
  color: black;
}

.logon {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  /* position: relative;
		overflow: hidden; */
  width: 768px;
  max-width: 100%;
  min-height: 480px;
  margin-top: 20px;
  display: flex;
  background: -webkit-linear-gradient(right, #4284db, #29eac4);
}

.overlaylong {
  border-radius: 10px 0 0 10px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaylongleft {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  transform: translateX(100%);
  transition: transform 0.6s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaylongright {
  border-radius: 10px 0 0 10px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  transform: translateX(0%);
  transition: transform 0.6s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaytitle {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaytitleH2 {
  font-size: 30px;
  color: #fff;
  margin-top: 20px;
}

.overlaytitleP {
  font-size: 15px;
  color: #fff;
  margin-top: 20px;
}

.overlaytitleleft {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0%);
  transition: transform 0.6s ease-in-out;
}

.overlaytitleright {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-100%);
  transition: transform 0.6s ease-in-out;
}

.overlaytitle-Signin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.overlaytitle-Signup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.buttongohs {
  width: 180px;
  height: 40px;
  border-radius: 50px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
  margin-top: 40px;
}

.overlaylongH2 {
  font-size: 25px;
  color: black;
  /* width: 250px; */
}

.overlaylong-Signin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.overlaylong-Signup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

input {
  background-color: #eee;
  border: none;
  padding: 12px 15px;
  margin: 10px 0;
  width: 240px;
}
h3 {
  font-size: 10px;
  margin-top: 10px;
  cursor: pointer;
}
.inupbutton {
  background-color: #29eac4;
  border: none;
  width: 180px;
  height: 40px;
  border-radius: 50px;
  font-size: 15px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  margin-top: 30px;
}
</style>
